<template>
	<view>
		<u-navbar back-text="返回" title="认证身份" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }" back-icon-color="#108EE9"></u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="135" :error-type=" ['toast']">
				<u-form-item label="姓  名" :required="true" prop="name">
					<u-input v-model="form.name" :clearable="false" />
				</u-form-item>
				<u-form-item label="身份证号" :required="true" prop="idCard">
					<u-input v-model="form.idCard" :clearable="false" />
				</u-form-item>
				<u-form-item label="联系电话" :required="true" prop="phone">
					<u-input v-model="form.phone" :clearable="false" />
				</u-form-item>
				<u-form-item label="身份证照片" :required="true" label-width="165" label-position="top">
					<view class="id-img-box">
						<view class="id-item">
							<view class="add-id">
								<image src="../../static/images/login/addcard.png" mode=""></image>
							</view>
							<view class="title">
								身份证正面
							</view>
						</view>
						<view class="id-item">
							<view class="add-id">
								<image src="../../static/images/login/addcard.png" mode=""></image>
							</view>
							<view class="title">
								身份证背面
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="工种" label-width="165" label-position="top">
					<view class="select-type" @click="openSelect">
						<view class="value-text">
							{{ selectObj.label }}
						</view>
						<view class="right-icon">
							<image src="../../static/images/common/right.png" mode=""></image>
						</view>
					</view>
					<u-select v-model="show" :list="selectList" :default-value="[0]" @confirm="confirm"></u-select>
				</u-form-item>
			</u-form>
			<view class="foot-btn" @click="submit">
				认证求职者
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,//显示下拉框的值
				selectObj:{},
				selectList: [{
						value: 1,
						label: '建筑工人'
					},
					{
						value: 2,
						label: '工程师'
					},
					{
						value: 3,
						label: '造价师'
					}
				],
				form: {
					name: '',
					idCard: '',
					phone: '',
					type:1
				},
				imgList: [],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}],
					idCard: [{
						required: true,
						message: '身份证号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					]
				}
			}
		},
		onLoad() {
			this.selectObj = this.selectList[0];
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			openSelect(){
				this.show = true;
			},
			confirm(e){
				this.selectObj = e[0];
				this.form.type = e[0].value;
			},
			submit() {
				this.$u.route('pages/attestation/success');
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 66rpx 40rpx 100rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		width: 100%;

		.id-img-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.id-item {
				width: 315rpx;
				height: 170rpx;
				background: rgba(245, 245, 245, 1);
				opacity: 1;
				border-radius: 10rpx;

				.add-id {
					width: 43rpx;
					height: 43rpx;
					margin: 36rpx auto 22rpx;
					font-size: 0;

					image {
						width: 43rpx;
						height: 43rpx;
					}
				}

				.title {
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 32rpx;
					color: rgba(201, 201, 201, 1);
					opacity: 1;
				}
			}
		}

		.now-title-box {
			margin-top: 50rpx;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 37rpx;
			opacity: 1;
		}
		.select-type{
			display: flex;
			width: 100%;
			justify-content: space-between;
			.value-text{
				font-size:32rpx;
				font-weight:400;
				line-height:43rpx;
				color:rgba(102,102,102,1);
				opacity:1;
			}
			.right-icon{
				width: 15rpx;
				height: 26rpx;
				font-size: 0;
				image{
					width: 15rpx;
					height: 26rpx;
				}
			}
		}
		.foot-btn {
			margin-top: 140rpx;
			width: 100%;
			text-align: center;
			height: 90rpx;
			background: linear-gradient(180deg, rgba(211, 176, 105, 1) 0%, rgba(228, 205, 112, 1) 100%);
			border-radius: 8rpx;
			line-height: 90rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: rgba(255, 255, 255, 1);
			opacity: 1;
		}
	}
</style>
